<template>
  <div>
    <p>我是父级组件</p>
    <!-- 其实就是为了说明Vue 是单项数据流，v-model 只是语法糖而已。 -->
    <!-- <input v-model="haorooms" />
    <input v-bind:value="haorooms" v-on:input="haorooms= $event.target.value" /> -->
    <!-- https://www.haorooms.com/post/vue_vmodel -->
    <p>父级组件内容：{{ text }}</p>
    <p><button @click="onChange">改变内容</button></p>
    <hr>
    <!-- v-model是一个语法糖
    1、v-bind:绑定响应式数据
    2、触发 input 事件 并传递数据 (核心和重点) -->
    <child v-model="text" :list="list" ref="childs"/>
    <child1 :one="child1" :two="child2" @test1="onTest1" @test2="onTest2"/>
    <p>{{ parent }}</p>
    <!-- https://www.jianshu.com/p/c2f519eca0d7  provide、inject -->
  </div>
</template>
<script>
import Child from './child'
import Child1 from './child1'
export default {
  components: {
    Child,
    Child1
  },
  data () {
    return {
      text: '我是父级组件的内容',
      list: [1, 2, 3],
      child1: 'lihua',
      child2: 'lignag',
      parent: 0
    }
  },
  created () {
  },
  mounted () {
    // console.log(this.$props)
    // console.log(this.$attrs)
    // console.log(this.$parent)
    // console.log(this.$prop)
    // console.log(this.$children)
    // console.log(this.$refs)
    // console.log(this.$refs.childs)
    // this.$refs.childs.del = 888 // $refs更改子组件的值
  },
  methods: {
    onChange () {
      this.text = '我是由父级组件触发改变了内容'
    },
    onTest1 () {
      console.log('child---')
    },
    onTest2 (val) {
      this.parent = val
    }
  }
}
</script>
<style scoped>
</style>
